// 获取url地址栏的id
function getProductId() {
    let url = location.href
    let productId = url.split('?')
    let id = productId[1].split('=')
    console.log(id[1])
    return id[1]
}
//调用商品详情接口
async function getProductDetail() {
    let data = await myPromise({
        method: 'get',
        url: 'http://api.yuguoxy.com/api/shop/find',
        data: {
            id: getProductId()
        }
    })
    if (data.resultCode == 1) {
        let productDetail = data.resultCode == 1 ? data.resultInfo : []
        console.log(productDetail)


        getProductDetailHtml(productDetail)
    }
}

//将商品详情渲染到界面上
function getProductDetailHtml(list) {
    let str = `<div class="container">
    <div class="top clearfix" id="glass">
        <div class="left">
            <div class="detailimg"><img src="${list.picture}" alt=""></div>
            <div class="mask"></div>
            <div class="text">
                <div class="tao">淘</div>
                <span>包邮</span>
                <span>${list.product}</span>
                <div class="price">
                    <span class="oldprice"> 原件25元</span>
                    <span>折扣价:￥<span>${list.price}</span></span>
                    <span><span>${list.oldprice}</span>人已买</span>
                </div>
                <div class="addToshoppingCar">加入购物车</div>
                <div class="viewToshoppingCar" onclick="lookCart()">查看购物车</div>
            </div>
        </div>
        <!-- 放大镜 -->
        <div class="bigger">
            <img src="${list.picture}" alt="" class="bigpic">
        </div>
        <div class="right">
            <div>——卖家信息——</div>
            <div><img src="./img/detail_2.png" alt=""></div>
            <span>辣典食品旗舰店</span>
            <span>描述</span>
            <span>服务</span>
            <span>物流</span>
            <br>
            <span>4.8</span>
            <span>4.8</span>
            <span>4.8</span>
        </div>
    </div>
    <div class="bottom">`
    let strImg = list.list.map(item => {
        return ` <div>
                    <img src="${item}" alt="">
                </div>`
    })
    str = str + strImg + ` </div></div>`
    $('#detail').html(str)

    // html结构是动态生成的，在生成html后调用放大镜类方法
    let glass1 = new Glass('#glass')
    glass1.onGlass()

    // 调用加入购物车函数
    addToCart()
}
// 放大镜
class Glass {
    constructor(id) {
        this.rootEle = document.querySelector(id)
        //遮罩层
        this.mask = this.rootEle.querySelector('.mask')
        //显示盒子left
        this.showbox = this.rootEle.querySelector('.detailimg')
        //放大镜盒子right
        this.glassBox = this.rootEle.querySelector('.bigger')
        //放大镜图片
        this.bigPic = this.rootEle.querySelector('.bigger>img')
        //所有选项
        this.liEles = this.rootEle.querySelectorAll('li')
        this.showimg = this.rootEle.querySelector('.detailimg>img')
    }
    onGlass() {
        let _this = this
        this.showbox.addEventListener('mousemove', function (e) {
            e = e || window.event

            let x = e.offsetX - _this.mask.clientWidth / 2
            let y = e.offsetY - _this.mask.clientWidth / 2

            //边界判定
            if (x < 0) {
                x = 0
            }
            if (x > _this.showbox.clientWidth - _this.mask.clientWidth) {
                x = _this.showbox.clientWidth - _this.mask.clientWidth
            }
            if (y < 0) {
                y = 0
            }
            if (y > _this.showbox.clientHeight - _this.mask.clientHeight) {
                y = _this.showbox.clientHeight - _this.mask.clientHeight
            }

            _this.mask.style.left = x + 40 + "px"
            _this.mask.style.top = y + 50 + "px"

            //计算bigPic大小
            let bigPicWidth = parseInt(_this.showbox.clientWidth * _this.glassBox.clientWidth / _this.mask.clientWidth)
            let bigPicHeight = parseInt(_this.showbox.clientHeight * _this.glassBox.clientHeight / _this.mask.clientHeight)

            _this.bigPic.style.width = bigPicWidth + "px"
            _this.bigPic.style.height = bigPicHeight + "px"

            //移动显示放大图片
            let moveX = x * _this.glassBox.clientWidth / _this.mask.clientWidth
            let moveY = y * _this.glassBox.clientHeight / _this.mask.clientHeight

            _this.bigPic.style.left = -moveX + "px"
            _this.bigPic.style.top = -moveY + "px"


        })
        //移出鼠标隐藏mask盒子和right盒子
        this.showbox.addEventListener('mouseout', function (e) {
            _this.mask.style.display = 'none'
            _this.glassBox.style.display = 'none'
        })
        //移入鼠标显示mask盒子和right盒子
        this.showbox.addEventListener('mouseover', function (e) {
            _this.mask.style.display = 'block'
            _this.glassBox.style.display = 'block'
        })
    }
}

//点击首页跳转到主界面index
function jumpToIndex() {
    $('#nav ul').on('click', 'li', function () {
        if ($(this).text() == '首页') {
            location.href = './index.html'
        }
    })
}
// 点击加入购物车按钮将对应商品信息存入localStorage中并跳转至购物车
function addToCart() {
    $('.addToshoppingCar').on('click', async function () {

        let data = await myPromise({
            method: 'get',
            url: 'http://api.yuguoxy.com/api/shop/find',
            data: {
                id: getProductId()
            }
        })
        if (data.resultCode == 1) {
            let productDetail = data.resultCode == 1 ? data.resultInfo : []
            console.log(productDetail)
            let newProduct = {
                id: productDetail.id,
                num: 1,
                url: productDetail.picture,
                name: productDetail.product,
                price: productDetail.price,
                singlePrice: productDetail.price,
                state: false
            }
            let cartListStr = localStorage.getItem('cartlist')
            let cartList = JSON.parse(cartListStr) || []
            //判断localStorage中是否有此商品
            let findProduct = cartList.find(item => item.id === newProduct.id)
            if (findProduct) {
                // 已经存在则数量加1
                findProduct.num++
                findProduct.singlePrice=findProduct.singlePrice+findProduct.price
            } else {
                cartList.push(newProduct)
            }
            localStorage.setItem('cartlist', JSON.stringify(cartList))
            alert('加入购物车成功')

            // //跳转至购物车
            // location.href = '../熊猫优选/shoppingCart.html'
        }
    })
}
//跳转至购物车
function lookCart() {
    location.href = './shoppingCart.html'
}


getProductDetail()
jumpToIndex()
addToCart()